<template>
  <div class="setting">
    <el-card>
      <!-- tabs选项 -->
      <el-tabs v-model="active">
        <el-tab-pane label="角色管理" name="first" class="first">
          <!-- 新增按钮 -->
          <el-button @click="openAdd" size="mini" class="mybtn" type="primary">
            <i class="el-icon-plus"></i>新增角色
          </el-button>
          <!-- 表单结构 -->
          <el-table
            v-loading="loading"
            :data="list"
            border
            stripe
            :header-row-style="{ color: 'pink', backgroundColor: 'green' }"
          >
            <el-table-column
              label="序号"
              type="index"
              width="100px"
            ></el-table-column>
            <el-table-column label="角色名" prop="name"></el-table-column>
            <el-table-column label="描述" prop="description"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button @click="openrole(scope.row)" type="text"
                  >分配权限</el-button
                >
                <el-button @click="openEdit(scope.row)" type="text">
                  修改
                </el-button>
                <el-button @click="delRole(scope.row.id)" type="text"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页组件 -->
          <el-pagination
            @size-change="sizeChange"
            @current-change="currentChange"
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </el-tab-pane>
        <el-tab-pane label="公司信息" name="second">
          <el-form :model="companyInfo" class="myform" label-width="100px">
            <el-form-item label="企业名称">
              <el-input disabled v-model="companyInfo.name"></el-input>
            </el-form-item>
            <el-form-item label="公司地址">
              <el-input
                disabled
                v-model="companyInfo.companyAddress"
              ></el-input>
            </el-form-item>
            <el-form-item label="公司电话">
              <el-input disabled v-model="companyInfo.companyPhone"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input disabled v-model="companyInfo.mailbox"></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input disabled v-model="companyInfo.remarks"></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 编辑面板 -->
    <el-dialog title="编辑角色" :visible.sync="showDialog">
      <el-form ref="myform" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input v-model="form.description"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancle">取 消</el-button>
        <el-button @click="submit" type="primary">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 分配权限面板 -->
    <setrole ref="myrole" :show.sync="show"></setrole>
  </div>
</template>

<script>
import {
  getRoleListApi,
  editRoleApi,
  addRoleApi,
  delRoleApi,
  getCompanyInfoApi
} from "@/api/setting";
export default {
  components: {
    setrole: () => import("./components/setrole.vue")
  },
  data() {
    return {
      loading: false,
      active: "first",
      // 表格的数据源
      list: [
        { id: 1, name: "张三", gender: "男" },
        { id: 2, name: "李四", gender: "女" },
        { id: 3, name: "王五", gender: "男" }
      ],
      // 当前选中的页面
      currentPage: 1,
      // 页容量选项
      pageSizes: [2, 4, 5, 10],
      // 选中的页容量
      pageSize: 2,
      // 数据的总条数
      total: 0,
      // 控制 新增&修改 面板的显示与隐藏
      showDialog: false,
      // 表单中的数据源
      form: {
        name: "", // 角色名称
        description: "" // 角色描述
      },
      // 添加校验规则
      rules: {
        name: [{ required: true, message: "角色名称不能为空", trigger: "blur" }]
      },
      // 保存公司信息
      companyInfo: {},
      show: false // 分配权限对话框显示
    };
  },
  methods: {
    // 得到公司信息
    async getCompanyInfo() {
      // 得到公司 id
      const companyId = this.$store.getters.userInfo.companyId;
      const res = await getCompanyInfoApi(companyId);
      this.companyInfo = res;
    },

    // 删除角色
    async delRole(id) {
      try {
        // 询问用户是否删除
        await this.$confirm("是否删除当前角色", "提示");
        // 发送请求
        await delRoleApi(id);
        // 判断当前数据源中是否还有数据
        if (this.list.length <= 1) {
          // 如果总数据长度小于 1，删除之后直接跳转到第一页
          this.currentPage = 1;
        }
        // 提示删除成功
        this.$message.success("删除成功");
        // 重新加载数据
        this.getRoleList();
      } catch {
        console.log("取消删除");
      }
    },

    // 打开新增面板
    openAdd() {
      this.showDialog = true;
    },

    // 提交数据
    submit() {
      // 添加全局校验
      this.$refs.myform.validate(async isOk => {
        if (isOk) {
          // 判断操作类型
          if (this.form.id) {
            // 修改操作
            // 提交数据到服务器
            await editRoleApi(this.form);
          } else {
            // 新增操作
            await addRoleApi(this.form);
          }
          // 重新获取数据
          this.getRoleList();
          // 提示操作成功
          this.$message.success("操作成功");
          // 关闭面板
          this.showDialog = false;
          // 清除数据
          this.form = {
            name: "",
            description: ""
          };
        }
      });
    },

    // 取消编辑
    cancle() {
      this.form = {
        name: "",
        description: ""
      };
      this.$refs.myform.resetFields();
      this.showDialog = false;
    },

    // 打开修改面板
    openEdit(obj) {
      // 打开修改面板
      this.showDialog = true;
      // 将数据渲染到面板中
      this.form = { ...obj };
    },
    
    // 当前页发生改变
    currentChange(page) {
      // 得到新的当前页
      this.currentPage = page;
      // 重新发送请求
      this.getRoleList();
    },
    // 页容量发生改变
    sizeChange(size) {
      // size 改变之后的页容量
      this.pageSize = size;
      // 重新发送请求到服务器
      this.getRoleList();
    },
    // 得到角色列表
    getRoleList() {
      // 开启加载动画
      this.loading = true;
      setTimeout(async () => {
        const res = await getRoleListApi({
          page: this.currentPage, // 当前页
          pagesize: this.pageSize // 页容量
        });
        // 保存数据源
        this.list = res.rows;
        this.total = res.total;
        // 关闭动画
        this.loading = false;
      }, 500);
    },

    // 打开分配权限的面板
    openrole(item) {
      this.show = true;
      // 调用方法得到角色详情
      this.$refs.myrole.getRightById(item.id);
    }
  },
  created() {
    // 得到所有的角色列表
    this.getRoleList();
    // 得到公司信息
    this.getCompanyInfo();
  }
};
</script>

<style lang="scss" scoped>
.setting {
  padding: 20px;
  .first {
    padding: 20px 40px;
    .mybtn {
      margin-bottom: 30px;
    }
  }
  ::v-deep .el-pagination {
    margin-top: 20px;
    padding-right: 20px;
    text-align: right;
  }
  .myform {
    width: 500px;
    margin-left: 100px;
    margin-top: 40px;
  }
}
</style>
